<template>
	<view class="">
		<w-navbar title="登记" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<view class="content">
					<view class="user_info_container">
						<u-calendar @close="showCalendar=false" @confirm="confirmCalendar" :show="showCalendar" :minDate="date_start" :monthNum="36"></u-calendar>
						
						<!-- <view class="address_box">
							<textarea v-model="address_info" class="textarea" :placeholder="placeholder" :maxlength="-1" name="" id="" cols="30" rows="10"></textarea>
							<view class="fr-ac mt-20 mb-10" style="justify-content: flex-end;">
								<view @click="address_info = ''" class="clear">
									清空
								</view>
								<view @click="check_address" class="find">
									识别
								</view>
							</view>
						</view> -->
						<view class="info_box">
							<!-- <view class="info_item">
								<view class="info_name">
									姓名
								</view>
								<view class="">
									<input v-model="name" type="text" placeholder="请输入您的姓名">
								</view>
							</view> -->
							<view class="info_item">
								<view class="info_name">
									手机
								</view>
								<view class="">
									<input v-model="phone" maxlength="11"  placeholder="请输入您的手机号">
								</view>
							</view>
							<view class="info_item">
								<view class="info_name">
									日期
								</view>
								<view @click="showCalendar = true" class="">
									{{date?date:'点击选择'}}
								</view>
							</view>
							
							<!-- <view class="info_item">
								<view class="info_name">
									省市区
								</view>
								<picker style="flex: 1;" @columnchange="addressColumnChange" mode="multiSelector" range-key="name"  :range="address_list" @change="addressChange">
									<view class="fr-ac-jsb">
										<view style="color: #888;" >{{splicingAddress(province_choose.name,city_choose.name,area_choose.name)}}</view>
										<view class="iconfont icon-arrow-down-filling ml-10" style="color: #888;"></view>
									</view>
								</picker>
							</view>
							<view class="info_item">
								<view class="info_name">
									详细地址
								</view>
								<view class="" style="width: 75%;">
									<input v-model="detail_address" type="text" placeholder="请输入您的详细地址">
								</view>
							</view> -->
						</view>
						
						<view class="" v-for="(item,index) in goods_list" :key="index">
							<view class="goods_index fr-ac">
								<view class="goods_line">
									
								</view>
								<view class="ml-20 bold">
									商品信息&nbsp;{{index+1}}
								</view>
								<view v-if="goods_list.length>1" @click="goodsDelete(index)" class="" style="margin-left: auto; color: #81c4d2;">
									删除
								</view>
							</view>
							
							<view class="info_box" >
								
								<view class="info_item">
									<view class="info_name">
										商品名称
									</view>
									<view class="">
										<input v-model="item.goods_name" maxlength="100" placeholder="请输入商品名称">
									</view>
								</view>
								<view class="info_item">
									<view class="info_name">
										商品价格
									</view>
									<view class="">
										<input v-model="item.goods_price" maxlength="10" type="digit" placeholder="请输入商品价格">
									</view>
								</view>
								<view class="info_item">
									<view class="info_name">
										商品数量
									</view>
									<view class="">
										<input v-model="item.goods_num" maxlength="6" type="number" placeholder="请输入商品数量">
									</view>
								</view>
								
							</view>
							
							<view class="up-page">
								<view style="width: 100%;display: flex;flex-wrap: wrap;">
									<view class="show-box" v-for="(item2,index2) in item.imageList" :key="index2">
										<image class="full" :src="'http://124.223.169.223'+item2"  @tap="previewImage(index,index2)">
										</image>
										<view class="delect-icon" @tap="delect(index,index2)">
											<image class="full" :src="clearIcon" mode=""></image>
										</view>
									</view>
									<!--视频-->
									<view v-if="VideoOfImagesShow" @tap="chooseVideoImage(index)" class="box-mode">
										<image class="full" :src="selectfile" mode=""></image>
									</view>
								</view>
							</view>
							
						</view>
						
						
						<view @click="goodsAdd" class="goods_add">
							+ &nbsp;添加商品信息
						</view>
						
						
					</view>
					
					
					<view class="" style="height: 150rpx;">
						
					</view>
				</view>
				<view class="bottom_box fr-ac-jsb">
					<view class="fr-ac ml-30">
						<view class="">
							合计
						</view>
						<view class="price">
							￥{{countAllTotalPrice}}
						</view>
					</view>
					<view @click="balance" class="pay_btn">
						登记
					</view>
				</view>
			</template>
		</w-container>
	</view>
</template>

<script>
	import { isValidPhoneNumber } from '@/utils/common.js'
	export default {
		data() {
			return {
				// 图标
				clearIcon: '',
				selectfile: '',
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //存放图片的地址
				videoList: [], //视频存放的地址
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的数量
				maxCount:5,//图片和视频允许上传的总数
				
				text:"",
				
				BASE_IMG_URL:'https://yqlcrm.qhmpf.com',
				//、、、、、、、、、、、、、、、、、、、
				
				
				ids:'',
				name:'',
				detail_address:'',
				
				placeholder:`请粘贴如"广东省佛山市顺德区世纪莲D出口",陈小春 13288371026自动识别地址，或者在下方手动输入`,
				
				address_info:'',
				res_address_info:{},
				province_choose:{},
				city_choose:{},
				area_choose:{},
				
				address_list_info:[],
				address_list:[[],[],[]],
				
				
				shop_list:[],
				shop_choose:{},
				
				goods_list:[
					{
						goods_name:'',
						goods_price:'',
						goods_num:'',
						imageList:[]
					}
				],
				
				is_shunfeng_postage:true,
				remarks:'',
				
				column0:0,
				column1:0,
				column2:0,
				value0:0,
				value1:0,
				value2:0,
				
				
				
				
				showCalendar:false,
				phone:'',
				date:'',
				goods_name:'',
				goods_price:'',
				goods_num:'',
				
				date_start:'',
				
			}
		},
		watch: {
		
		},
		computed:{
			countAllTotalPrice(){
				let count = 0
				this.goods_list.forEach((e,index)=>{
					count += (e.goods_price || 0) * (e.goods_num || 0)
				})
				return count.toFixed(2)
			}
		},
		onLoad(options) {
			const currentYear = new Date().getFullYear();
			this.date_start = (currentYear-1) + '-1-1'
			
			this.ids = options.ids || ''
			// this.get_area_list()
			// this.get_shop_list()
			// this.get_goods_list()
		},
		onShow() {
		},
		methods: {
			//点击上传图片或视频
			chooseVideoImage(index) {
				this.chooseImages(index);
				
			},
			//上传图片
			async chooseImages(index) {
				uni.chooseImage({
					count: this.maxCount, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						uni.showLoading({
							title:'正在上传...'
						})
						let tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach( async ele=>{
							let oss_url = await this.uploadFile(ele)
							
							this.goods_list[index].imageList = this.goods_list[index].imageList.concat(oss_url);
							if (this.goods_list[index].imageList.length >= this.maxCount) {
								this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
								this.goods_list[index].imageList = this.goods_list[index].imageList.slice(0,this.maxCount)
							}
							
							// this.imageList = this.imageList.concat(oss_url);
							// console.log(this.imageList)
							// if (this.imageList.length+this.videoList.length >= this.maxCount) {
							// 	this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
							// 	this.imageList = this.imageList.slice(0,this.maxCount)
							// }
						})
						uni.hideLoading()
						
					}
				})
			},
			
			//预览图片
			previewImage: function(index,index2) {
				console.log()
				const list = this.goods_list[index].imageList.map(e=>{
					return 'http://124.223.169.223'+e
				})
				uni.previewImage({
					current: index2,
					urls: list
				});
			},
			// 删除图片
			delect(index,index2) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.goods_list[index].imageList.splice(index2, 1);
						}
						if (this.goods_list[index].imageList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.videoList.splice(index, 1);
						}
						if (this.imageList.length+this.videoList.length  == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			
			async uploadFile(file){
				console.log(file,'filefilefile')
				return new Promise((resolve,reject)=>{
					uni.uploadFile({
						url:"http://124.223.169.223/api/common/upload",
						name:'file',
						header:{
							'token':uni.getStorageSync('token')
						},
						// #ifdef MP-ALIPAY
						fileType:'image',
						// #endif
						filePath: file,
						success:(res)=>{
							let data = JSON.parse(res.data)
							console.log(data,'data')
							if(data.code == 1) {
								// let oss_url = this.BASE_IMG_URL+ data.data.flie_url
								let oss_url = data.data.url
								resolve(oss_url)
							}else{
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
								reject(res)
							}
						},
						fail:(err)=>{
							console.log(err)
						}
					})
				})
				
			},
			
			
			goodsDelete(index){
				this.goods_list.splice(index,1)
			},
			goodsAdd(){
				this.goods_list.push({
					goods_name:'',
					goods_price:'',
					goods_num:'',
					imageList:[]
				})
			},
			confirmCalendar(e){
				console.log(e,'eeeeee')
				this.date = e[0]
				this.showCalendar = false
			},
			
			
			
			
			
			
			splicingAddress(p , c , a){
				return p && c && a ? `${p??''}${c??''}${a??''}` : '请选择您的地区'
			},
			async balance_add() {
				const list = this.goods_list.map(e=>{
					return {
						...e,
						image:e.imageList.toString()
					}
				})
				const sign_info = JSON.stringify(list)
				console.log(sign_info,'sign_info')
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/api/Sign/signInfo',
					data: {
						mobile:this.phone,
						date:this.date,
						sign_info
						// goods_name:this.goods_name,
						// goods_price:this.goods_price,
						// goods_num:this.goods_num,
					}
				})
				if (res.code == 1) {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					uni.showModal({
						title:res.msg,
						showCancel:false,
						success: (res) => {
							if(res.confirm){
								uni.navigateBack()
							}
						}
					})
					// uni.reLaunch({
					// 	url:'/pages/index/index'
					// })
				}
				uni.hideLoading()
			},
			//地址识别
			async check_address() {
				if(!this.address_info){
					return uni.showToast({
						title:'不能为空',
						icon:'none'
					})
				}
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.address/check_address',
					data: {
						address_info:this.address_info,
					}
				})
				if (res.code == 1) {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					this.res_address_info = res.data
					this.name = this.res_address_info.name
					this.phone = this.res_address_info.mobile
					this.detail_address = this.res_address_info.info
					this.province_choose = {
						name: this.res_address_info.province.region_name,
						value: this.res_address_info.province.region_id,
					}
					this.city_choose = {
						name: this.res_address_info.city.region_name,
						value: this.res_address_info.city.region_id,
					}
					this.area_choose = {
						name: this.res_address_info.district.region_name,
						value: this.res_address_info.district.region_id,
					}
				}
				uni.hideLoading()
			},
			//登记页面的商品信息
			async get_goods_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.cart/get_goods_list',
					data: {
						cart_ids:this.ids,
						sceneval:1 //	1-购物车 2-直接购买
					}
				})
				if (res.code == 1) {
					this.goods_list = res.data
				}
				uni.hideLoading()
			},
			//店铺
			async get_shop_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/get_shop_list',
					data: {
						
					}
				})
				if (res.code == 1) {
					this.shop_list = res.data.shop_list
				}
				uni.hideLoading()
			},
			shopChange(e){
				this.shop_choose = this.shop_list[e.detail.value]
			},
			//省市区
			async get_area_list(province,city) {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.common/get_area_list',
					data: {
						
					}
				})
				if (res.code == 1) {
					this.address_list_info = res.data.area_info
					this.set_address_list(0)
					this.set_address_list(1)
					this.set_address_list(2)
				}
				uni.hideLoading()
			},
			set_address_list(index){
				let list = []
				switch (index){
					case 0:
						list = this.address_list_info.map(item => {
							console.log( Array.isArray(item.cities),555)
							return {
								name:item.show_name,
								value:item.value_id,
								children:item.child
							}
						})
						break;//设置省
					case 1:
						console.log(this.address_list[0][this.value0].children,222)
						list = this.address_list[0][this.value0].children.map(item => {
							return {
								name:item.show_name,
								value:item.value_id,
								children:item.child
							}
						})
						break;//设置市
					case 2:
						list = this.address_list[1][this.value1].children.map(item => {
							return {
								name:item.show_name,
								value:item.value_id,
								children:item.child
							}
						})
						break;//设置区
					default:
						break;
				}
				
				this.$set(this.address_list,index,list)
			},
			addressColumnChange(e){
				console.log(e,22222)
				if(e.detail.column == 0){
					this.column0 = e.detail.column
					this.value0 = e.detail.value
					this.set_address_list(1)
					this.set_address_list(2)
				}
				if(e.detail.column == 1){
					this.column1 = e.detail.column
					this.value1 = e.detail.value
					this.set_address_list(2)
				}
				if(e.detail.column == 2){
					this.column2 = e.detail.column
					this.value2 = e.detail.value
				}
				// this.
			},
			addressChange(e){
				console.log(e,11111)
				this.province_choose = this.address_list[0][e.detail.value[0]]
				this.city_choose = this.address_list[1][e.detail.value[1]]
				this.area_choose = this.address_list[2][e.detail.value[2]]
				this.detail_address = this.province_choose.name + this.city_choose.name + this.area_choose.name
				this.column0 = 0
				this.column1 = 0
				this.column2 = 0
				this.value0 = 0
				this.value1 = 0
				this.value2 = 0
				// this.
			},
			balance(){
				if(!this.phone){
					return uni.showToast({
						title:'请输入正确手机号',
						icon:'none'
					})
				}
				if(!this.date){
					return uni.showToast({
						title:'请选择日期',
						icon:'none'
					})
				}
				try{
					this.goods_list.forEach((e,index)=>{
						if(!e.goods_name){
							throw {
								index,
								name:'名称'
							}
						}
						if(!e.goods_price){
							throw {
								index,
								name:'价格'
							}
						}
						if(!e.goods_num){
							throw {
								index,
								name:'数量'
							}
						}
					})
					
					this.balance_add()
				}catch(e){
					uni.showToast({
						title:`请输入商品【${e.index+1}】的${e.name}`,
						icon:'none'
					})
					//TODO handle the exception
				}
				
				
				
				
			},
		}
			
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: rgb(243,244,248);
	}
	
	.user_info_container{
		box-sizing: border-box;
		padding: 0 30rpx;
		
		.address_box{
			background-color: white;
			box-sizing: border-box;
			padding: 20rpx;
			.textarea{
				line-height: 1.2;
				width: 100%;
				height: 80rpx;
			}
			
			.clear{
				color: $theme-color;
				margin: 0 20rpx;
				padding: 8rpx 20rpx;
			}
			.find{
				color: white;
				background-color: $theme-color;
				padding: 8rpx 30rpx;
			}
		}
		
		.info_box{
			margin-top: 30rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 0 30rpx;
			border-radius: 12rpx;
			
			.info_item{
				display: flex;
				align-items: center;
				padding: 35rpx 0;
				border-bottom: 2rpx solid #eee;
				
				.info_name{
					width: 25%;
					
				}
			}
			.info_item:nth-last-child(1){
				border: none;
			}
		}
	}

	.order_container{
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		
		image{
			min-width: 100rpx;
			min-height: 100rpx;
			width: 100rpx;
			height: 100rpx;
		}
		
		text{
			color: #999;
		}
		
		view,text{
			font-size: 26rpx;
		}
		
		.order_number_box{
			border-bottom: 2rpx solid #eee;
			
			.date{
				color: #999;
				margin-left: auto;
			}
			
		}
		
	}
	
	.order_info_box{
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: white;
		margin-top: 20rpx;
		
		.info_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #eee;
			
			.info_value{
				text-align: right;
				display: flex;
				align-items: center;
				color: #888;
			}
			
			.info_name{
				
			}
		}
		
	}
	
	.remarks{
		box-sizing: border-box;
		padding: 30rpx;
		background-color: white;
		margin-top: 20rpx;
		
		.remarks_textarea{
			margin: 20rpx 0 ;
			border: 2rpx solid #eee ;
			box-sizing: border-box;
			padding: 20rpx;
			
			.text{
				width: 100%;
				height: 80rpx;
			}
		}
	}
	
	.bottom_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		z-index: 999;
		background-color: white;
		box-shadow: 0 0 12rpx #eee;
		
		.price{
			color: $theme-color;
		}
		
		.pay_btn{
			height: 100%;
			width: 30%;
			line-height: 120rpx;
			background-color: $theme-color;
			color: white;
			text-align: center;
		}
		
	}
	
	.goods_index{
		box-sizing: border-box;
		padding: 30rpx;
		background-color: white;
		margin-top: 30rpx;
		border-radius: 12rpx;
	}
	
	.goods_line{
		width: 6rpx;
		height: 36rpx;
		background-color: $theme-color;
		border-radius: 6rpx;
	}
	
	.goods_add{
		width: fit-content;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: $theme-color;
		margin-top: 20rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 12rpx;
	}
	
	
	
	
	
	
	/* 统一上传后显示的盒子宽高比 */
	.box-mode {
		width: 25vw;
		height: 25vw;
		
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.full {
		width: 100%;
		height: 100%;
	}
	 
	.up-page {
		margin-top: 20rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: white;
		border-radius: 12rpx;
		
		
		.show-box:nth-child(3n){
			margin-right: 0;
		}
		.show-box {
			position: relative;
			margin-bottom:4vw;
			margin-right: 4vw;
			@extend .box-mode;
	 
			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				z-index: 1000;
			}
		}
	}
	.submit-btn{
		margin: 50rpx 0;
		background-color: #07c160;
		color: white;
		padding: 20rpx 0;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		letter-spacing: 10rpx;
		font-weight: bold;
		border-radius: 18rpx;
	}
</style>